<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/top-nav.min.css">
    <link rel="stylesheet" href="../css/login_alert.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/shop.min.css">
    <link rel="stylesheet" href="../css/footer.min.css">
    <script src="../../dist/js/jquery.min.js"></script>
    <script src="../../dist/js/cookie.min.js"></script>
    <script src="../../dist/js/additem.min.js"></script>
    <script src="../../dist/js/index.min.js"></script>
    <script src="../../dist/js/shop.min.js"></script>
</head>

<body>
    <!-- 登录界面 -->
    <div id="login-alert">
        <div class="alert-top">
            <h3><i class="alertclose right"></i></h3>
            <div class="login-wrap">
                <div class="loginh">
                    <div class="left">会员登录</div>
                    <div class="right">
                        还没有账号?
                        <a href="./register.html" id="zhuce" title="注册" target="_blank">立即注册</a>
                    </div>
                </div>
                <form action method="POST" id="login_form">
                    <input type="text" name="username" id="username" placeholder="用户名">
                    <input type="password" name="password" id="password" placeholder="密码">
                    <p class="login_btn">
                        <input type="button" value="登录" id="btn-login">
                        <input type="checkbox" id="save_login" checked="checked"> 保持登录
                        <a href="javascript:;" class="right" title="找回密码">忘记密码?</a>
                    </p>
                </form>
            </div>
        </div>
        <div class="alert-bottom">
            <div class="pd50">
                <h4>用第三方账号直接登录</h4>
                <ul>
                    <li class="sina">
                        <a href="javascript:;">微博账号登录</a>
                    </li>
                    <li style="margin-right: 0px;" class="qq">
                        <a href="javascript:;">QQ账号登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏 -->
    <div id="top-nav" style="background: #f9f9f9;">
        <div class="top-nav">
            <div class="top-left">
                <a href="javascript:;" title="手机版"><s class="top-img"></s>手机版</a>
                <i>|</i>
                <a href="" title="金币充值">金币充值</a>
                <script>
                    $('.top-left a').on('click', function() {
                        alert('此功能尚未开发');
                    });
                </script>
            </div>
            <div class="top-right">
                <div class="order"><a title="我的订单">我的订单</a></div>
                <i>|</i>
                <div class="personal"><a title="个人中心">个人中心</a></div>
                <i>|</i>
                <div class="unlogin">
                    您还未登录，请<a href="javascript:;" title="登录">登录</a>
                </div>
                <div class="logined" style="display: none">
                    <p>
                        欢迎您，
                        <a href="javascript:;" class="user"></a>
                        &nbsp;<a href="javascript:;" class="btn-out">退出</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 搜索导航栏 -->
    <div id="search-nav">
        <div class="search-nav">
            <div class="logobox left">
                <a href="javascript:;" title="道聚城"></a>
            </div>
            <div class="logogame right">
                <a href="javascript:;" title="aion">
                    <img src="../images/14564556113168.jpg" alt="aion">
                </a>
            </div>
        </div>
    </div>
    <!-- 主导航栏 -->
    <div id="main-nav">
        <div class="main-nav">
            <ul class="left">
                <li class="nav-item"><a href="index1.html" class="btn_index">首页</a></li>
                <li class="nav-item"><a href="index1.html#newProducts" class="btn_shop">商品列表</a></li>
                <li class="nav-item"><a href="index1.html#activity" class="btn_activity">活动列表</a></li>
                <li class="nav-item"><a href="index1.html#discount" class="btn_discount">限时折扣</a></li>
                <li class="nav-item"><a href="index1.html#newProducts" class="btn_beans">聚豆乐园</a></li>
                <li class="nav-item"><a href="index1.html#around_shop" class="btn_around">周边商城</a></li>
                <li class="nav-item"><a href="javascript:;" class="btn_personal">个人中心</a></li>
            </ul>
            <div class="nav-cart right">
                <a href="javascript:;" class="btn-cart" title="购物车">
                    <i id="cartNum">( 0 )</i>
                    <s class="i-cart"></s> 购物车
                </a>
            </div>
        </div>
    </div>
    <!-- 购物车内容 -->
    <div class="location-box">
        您现在的位置： > 购物车</div>
    <div class="cart-main">
        <!-- 用户信息 -->
        <div class="user-info">
            <h3>收货用户信息</h3>
            <div class="now-user">
                <div class="left">
                    当前用户： <strong class="username">无</strong>
                </div>
                <a href="javascript:;" class="btn-out">退出登录</a>
            </div>
        </div>
        <!-- 获取用户名 -->
        <script>
            var user = cookie.get('username');
            if (user) {
                $('.btn-out').css('display', 'inline-block');
                $('.username').html(user);
            } else {
                $('.btn-out').css('display', 'none');
            }
        </script>
        <!-- 商品列表 -->
        <div class="shop-info">
            <h2>商品信息</h2>
            <div class="shop-list">
                <table class="cart-list-table" border="0">
                    <thead>
                        <tr style="border-bottom: 1px dotted #DEDFDE">
                            <th>选择</th>
                            <th>商品名称</th>
                            <th>类型</th>
                            <th>单价</th>
                            <th>期限</th>
                            <th width="100px">数量</th>
                            <th>优惠</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <th><input type="checkbox"></th>
                            <td style="text-align:left">
                                <img src="../images/20160704_23505_1306.jpg">
                                <a href="javascript:;">死兆星 韦鲁斯</a>
                            </td>
                            <td>皮肤</td>
                            <td>79.00 Q币</td>
                            <td>永久</td>
                            <td>1</td>
                            <td>限时折扣</td>
                            <td>39.50 Q币</td>
                            <td><a href="javascript:;" class="btn-clear">删除</a></td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            <!-- 商品总计 -->
            <div class="cart-total-box" style="display: none;">
                <p class="left" style="margin-left: 17px;">
                    <label class="blue">商品件数/最大件数</label>
                    <span id="cart_status" class="black"></span>
                </p>
                <p class="right" style="margin-right: 5px;">
                    共<span id="cart_current_num"></span>个商品 总价:
                    <span class="red cart_add_num">130.00</span>
                    <span class="red">Q币</span>
                </p>
            </div>
        </div>
        <!-- 合计 -->
        <div class="shop-sum">
            <h2>你的订单合计</h2>
            <div class="cart-t1">
                实付款：<span class="sum-num">0.00</span>Q币
                <div class="btn-submit">
                    <a href="javascript:;">提交订单</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="footer">
        <div class="footer-top">
            <div class="bx_qa_t1">
                <h4><s class="i_new"></s>我是新手</h4>
                <ul class="bx_qa_ul">
                    <li>什么是道聚城</li>
                    <li>如何购买</li>
                    <li>如何赠送</li>
                    <li>如何获取聚豆</li>
                </ul>
            </div>
            <div class="bx_qa_t1">
                <h4><s class="i_qa"></s>个人中心</h4>
                <ul class="bx_qa_ul">
                    <li>发货时间</li>
                    <li>如何领取</li>
                    <li>补发规则</li>
                    <li>Vip定价</li>
                    <li>道具状态定义</li>
                </ul>
            </div>
            <div class="bx_qa_t1">
                <h4><s class="i_pay"></s>支付方式</h4>
                <ul class="bx_qa_ul">
                    <li>支付方式</li>
                    <li>购物点支付</li>
                    <li>如何充值</li>
                </ul>
            </div>
            <div class="bx_qa_t1">
                <h4><s class="i_kf"></s>腾讯在线服务</h4>
                <ul class="bx_qa_ul">
                    <li>腾讯官方在线客服</li>
                </ul>
            </div>
            <div class="bx_qa_t1" style="width: 298px;">
                <ul class="bx_qa_ul">
                    <li style="float: left;margin-left: 40px;width: 100px;height: auto;">
                        <div class="foot-codeimg">
                            <img src="../images/zsdjc.png">
                        </div>
                        <p>掌上道聚城</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer_ied">
                <p>
                    <a href="javascript:;">腾讯互动娱乐</a> | <a href="javascript:;">服务条款</a> | <a href="javascript:;">腾讯游戏隐私保护指引</a> | <a href="javascript:;">广告服务</a> | <a href="javascript:;">腾讯游戏招聘</a> | <a href="javascript:;">腾讯游戏客服</a> | <a href="javascript:;">游戏地图</a>                    | <a href="javascript:;">成长守护平台</a> | <a href="javascript:;">商务合作</a> | <a href="javascript:;">网站导航</a>
                </p>
                <p>COPYRIGHT © 1998 – 2019 TENCENT. ALL RIGHTS RESERVED.</p>
                <p><a href="javascript:;">腾讯公司 版权所有</a></p>
            </div>
        </div>
    </div>
    <!-- 提交订单后,支付订单 -->
    <div>
        <div class="midas_minipay_dialog_mask"></div>
        <div class="midas_minipay_dialog_wrap_no_border">
            <div class="midas_minipay_dialog_header">
                <div class="cp-header-title">订单支付</div>
                <div class="header-icon-last" title="关闭">
                    <i></i>&nbsp;
                </div>
            </div>
            <div class="midas_minipay_dialog_content">
                <div id="order_info">
                    <div class="midas_prop">
                        <div class="account">
                            <div class="account-area">
                                <span class="account-title">购买账号：</span>
                                <span class="account-id"></span>
                            </div>
                            <div class="prop-detail">
                                <div class="prop-img left"><img src="../images/djlogo90_90.png" height="90px"></div>
                                <div class="prop-info">
                                    <p class="prop-tittle">支付订单</p>
                                </div>
                                <div class="prop-price"><em></em>元</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="pay-area" style="min-height:100px;">
                        <div class="pay-area-header" style="position: relative;min-height: 60px;">
                            <h3>支付方式</h3>
                            <div class="channels">
                                <div class="channel checked">
                                    <span>QQ钱包</span>
                                    <em>97折</em>
                                    <i class="icon-corner-checked"></i>
                                </div>
                                <div class="channel">
                                    <span>Q币支付</span>
                                    <i class="icon-corner-checked"></i>
                                </div>
                                <div class="channel">
                                    <span>微信支付</span>
                                    <em>97折</em>
                                    <i class="icon-corner-checked"></i>
                                </div>
                                <div class="channel" style="width: 120px">
                                    <span>其他方式</span>
                                    <i class="icon-corner-checked"></i>
                                </div>
                            </div>
                        </div>
                        <div class="erweima">
                            <span>假装有个二维码</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>